<template>
    <div>
        <el-button type="primary" @click="dialogFormVisible = true; operataType = 'save'" style="margin-bottom: 20px;">添加信息</el-button>
        <el-dialog title="订单信息" :visible.sync="dialogFormVisible" @close="handleClose">
        <el-form :model="order">
            <el-form-item label="订单编号" :label-width="formLabelWidth">
                <el-input v-model="order.id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="订单创建时间" :label-width="formLabelWidth">
                <el-input v-model="order.create_time" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="收货地址" :label-width="formLabelWidth">
                <el-input v-model="order.receiving_address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户编号" :label-width="formLabelWidth">
                <el-input v-model="order.user_id" show-password auto-complete="off" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSave">确 定</el-button>
        </div>
        </el-dialog>
        <el-table
            border
            stripe
            :data="orders"
             max-height="500"
            style="width: 100%">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>

            <el-table-column
                label="订单编号"
                width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="订单创建时间"
                width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.create_time }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="收货地址"
                width="100">
                <template slot-scope="scope">
                    <span>{{ scope.row.receiving_address }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="用户编号"
                width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.user_id }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" width="150">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            style="margin-top: 20px;"
            background
            layout="prev, pager, next"
            :total="total"
            :page-size = "pageSize"
            :current-page ="current"
            @current-change="loadProduct">
        </el-pagination>
    </div>
</template>
<script>
    export default {
    name: "OrderView",
    data() {
        return {
            //商品列表
            orders: [],
            dialogFormVisible: false, //控制对话框的显示
            formLabelWidth:'120px',
            order:{id:'', create_time:'', receiving_address:'', user_id:''},//订单数据
            operataType:'',//操作类型  save  update
            total:0,//用户总数
            pageSize:10,//每页行数
            current:0,//当前页数
        }
    },
    methods:{
        //加载函数
        loadOrder(current){
            this.current = current
                this.$http.post('/order?action=page', this.$qs.stringify({
                    pageSize: this.pageSize,
                    currentPage: this.current
                }))
                    .then(resp => {
                        //处理后台返回的结果
                        console.log(resp.data)
                        //数据绑定
                        if(resp.data.data){
                            this.total = resp.data.data.total
                            this.orders = resp.data.data.records
                        }
                    })
            },
            handleEdit(index, row) {
                this.operataType = 'update';
                this.dialogFormVisible = true;
                console.log(index, row);
                this.order = JSON.parse(JSON.stringify(row))
            },
            handleDelete(index, row) {
                console.log(index, row);
                this.$confirm('是否确定删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post('/order?action=delete&id='+ row.id)
                    .then(resp => {
                        if(resp.data.data == true){
                            this.loadOrder(this.current);
                            this.$message({
                                type:'success',
                                message:'删除成功'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type:'info',
                        message:'已取消删除'
                    });
                })    
            },
            handleSave(){
                if(this.operataType == 'save'){
                    console.log('save order');
                    this.$http.post('order?action=save',this.$qs.stringify(this.order))
                    .then(resp => {
                        console.log('save order', resp.data)
                        if(resp.data.data == true){
                            this.loadOrder(this.current);
                        }
                    })
                } else {
                    console.log('update order');
                    this.$http.post('order?action=update',this.$qs.stringify(this.order))
                    .then(resp => {
                        console.log('update order', resp.data)
                        if(resp.data.data == true){
                            this.loadOrder(this.current);
                        }
                    })
                }
                this.dialogFormVisible = false
            },
            handleClose(){
                console.log();
                this.order = {id:'', create_time:'', receiving_address:'', user_id:''}
                this.operataType = ''
            }
    },
    
    //页面挂载钩子
    mounted(){
        this.loadOrder(1)
    }
}
</script>